<template>
  <div class="channel-edit">
    <van-cell title="我的频道" :border="false">
    </van-cell>
    <van-grid :gutter="10">
      <van-grid-item class="channel-item"
                     v-for="value in UserChannels"
                     :key="value.id"
                     :text="value.name"
                     @click="deleteItem(value)" />
    </van-grid>
    <van-cell title="频道推荐" :border="false"></van-cell>
    <van-grid :gutter="10">
      <van-grid-item class="channel-item"
                     v-for="value in channellists"
                     :key="value.id"
                     :text="value.name"
                     @click="addItem(value)"/>
    </van-grid>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'ChannelEdit',
  components: {},
  props: {
    UserChannels: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      newchannel: []
    }
  },
  computed: {
    ...mapState(['channellists'])
  },
  created () {
    this.newchannel = this.UserChannels
  },
  methods: {
    deleteItem (val) {
      this.$store.commit('deleteChannel', val)
    },
    addItem (val) {
      this.$store.commit('addChannel', val)
    }
  }
}
</script>

<style scoped lang="less">
.channel-edit {
  .channel-item {
    height: 86px;
    /deep/ .van-grid-item__content {
      background-color: #f5f5f6;
      .van-grid-item__text {
        color: #222;
        font-size: 28px;
      }
    }
  }
  .van-cell {
    margin-top: 70px;
  }
}
</style>
